<template>
  <div class="app-container">
    <div>
      <div>批次详情</div>
      <div class="batch-box">
        <el-row class="batch-row">
          <el-col :span="5">
            <span>批次号：</span>
            <span class="gray-text">{{ this.form.number }}</span>
          </el-col>
          <el-col :span="5">
            <span>背调套餐：</span>
            <span class="gray-text">{{ this.form.number }}</span>
          </el-col>
          <el-col :span="5">
            <span>背调人数：</span>
            <span class="gray-text">{{ this.form.cdNumber }}</span>
          </el-col>
          <el-col :span="5">
            <span>单价：</span>
            <span class="gray-text">{{ this.form.oneAmount }}</span>
          </el-col>
          <el-col :span="4">
            <span>总价：</span>
            <span class="gray-text">{{ this.form.amount }}</span>
          </el-col>
        </el-row>
        <el-row class="batch-row">
          <el-col :span="5">
            <span>商家名称：</span>
            <span class="gray-text">{{ this.form.storeName }}</span>
          </el-col>
          <el-col :span="5">
            <span>所属代理商：</span>
            <span class="gray-text">{{ this.form.agentName }}</span>
          </el-col>
          <el-col :span="5">
            <span>操作人：</span>
            <span class="gray-text">{{ this.form.userName }}</span>
          </el-col>
          <el-col :span="5">
            <span>创建时间：</span>
            <span class="gray-text">{{ this.form.createTime }}</span>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
    </div>
    <div>
      <div class="">订单详情</div>
      <div class="batch-box">
        <el-form ref="form2" :model="form2" label-width="100px" size="small" :inline="true">
          <el-form-item label="候选人姓名">
            <el-input v-model="form2.cdName" placeholder="请输入候选人姓名" clearable  />
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="form2.idNumber" placeholder="请输入身份证号"  clearable />
          </el-form-item>
          <el-form-item label="背调编号">
            <el-input v-model="form2.number" placeholder="请输入背调编号"  clearable  />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form2.orderStatus" placeholder="全部" clearable >
              <el-option v-for="item in optionsStatus" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-input v-model="form2.orderStatus" placeholder="请输入状态" /> -->
          </el-form-item>
          <el-form-item label="报告结果">
            <el-select v-model="form2.orderOutcome" placeholder="全部"  clearable >
              <el-option v-for="item in optionsOutcome" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-input v-model="form2.orderOutcome" placeholder="请输入代理商id" /> -->
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker style="width: 210px;" v-model="daterangeCreateTime" value-format="yyyy-MM-dd"
              type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-form>
        <div class="button-right">
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </div>
      </div>
      <el-divider></el-divider>
    </div>
    <div>
      <el-table :data="sysOrderList" :row-class-name="rowSysOrderIndex"
        @selection-change="handleSysOrderSelectionChange" ref="sysOrder">
        <el-table-column label="序号" align="center" prop="index" width="50" />
        <el-table-column label="候选人" align="center" prop="cdName" />
        <el-table-column label="身份证号" align="center" prop="idNumber"  width="180" />
        <el-table-column label="背调编号" align="center" prop="number"  width="180" />
        <el-table-column label="商家名称" align="center" prop="storeName" />
        <el-table-column label="价格" align="center" prop="amount" />
        <el-table-column label="状态" align="center" prop="orderStatus">
          <template slot-scope="scope">
            <p v-if="scope.row.orderStatus === 0">发起背调</p>
            <p v-if="scope.row.orderStatus === 1">待授权</p>
            <p v-if="scope.row.orderStatus === 2">背调中</p>
            <p v-if="scope.row.orderStatus === 3">已出报告</p>
          </template>
        </el-table-column>
        <el-table-column label="结果" prop="orderOutcome">
          <template slot-scope="scope">
            <p v-if="scope.row.orderOutcome == '1'">待出具</p>
            <p v-if="scope.row.orderOutcome == '2'">无风险</p>
            <p v-if="scope.row.orderOutcome == '3'" class="blue-text">低风险</p>
            <p v-if="scope.row.orderOutcome == '4'" class="yellow-text">中风险</p>
            <p v-if="scope.row.orderOutcome == '5'" class="red-text">高风险</p>
                </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleUpdate(scope.row)"
              v-hasPermi="['orderParent:orderParent:edit']">查看报告</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDown(scope.row)"
              v-hasPermi="['orderParent:orderParent:edit']">下载报告</el-button>
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleProgress(scope.row)"
              v-hasPermi="['orderParent:orderParent:edit']">查看进度</el-button>
          </template>
        </el-table-column>
        <!--        <el-table-column label="报告路径" prop="reportUrl" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.reportUrl" placeholder="请输入报告路径" />
          </template>
        </el-table-column> -->
        <!--        <el-table-column label="套餐id" prop="setmealId" width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.setmealId" placeholder="请输入套餐id" />
          </template>
        </el-table-column> -->

      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="form2.pageNum" :limit.sync="form2.pageSize"
        @pagination="getTable" />

    </div>
  </div>
</template>

<script>
import { getOrderDetail } from "@/api/order/orderDetail"
import { downloadReport } from "@/api/order/order";
import { listOrderParent, getOrderParent, delOrderParent, addOrderParent, updateOrderParent } from "@/api/orderParent/orderParent";
export default {
  name: "OrderParent",
  data() {
    return {
      daterangeCreateTime: [],
      form2: {},
      optionsStatus: [{
        value: 0,
        label: '发起背调'
      }, {
        value: 1,
        label: '待授权'
      }, {
        value: 2,
        label: '背调中'
      }, {
        value: 3,
        label: '已出报告'
      }],
      optionsOutcome: [{
        value: 1,
        label: '待出具'
      }, {
        value: 2,
        label: '无风险'
      }, {
        value: 3,
        label: '低风险'
      }, {
        value: 4,
        label: '中风险'
      }, {
        value: 5,
        label: '高风险'
      }],
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedSysOrder: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 批量订单表格数据
      orderParentList: [],
      // ${subTable.functionName}表格数据
      sysOrderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        number: null,
        orderStatus: null,
        agentName: null,
        setmealId: null,
        storeName: null,
        createTime: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.form = {};
    this.form2 = {};
    this.getList();
    this.getTable();
  },
  watch: {
    '$route'(to, from) {
      // 当路由变化时，检查查询参数是否变化
      if ((to.query.id !== from.query.id) && (to.query.id !== undefined)) {
        this.getList(); // 如果查询参数中的 id 发生变化，则重新获取数据
        this.getTable();
      }
    }
  },
  methods: {
    getList() {
      // if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
      //   this.form2.params["beginCreateTime"] = this.daterangeCreateTime[0];
      //   this.form2.params["endCreateTime"] = this.daterangeCreateTime[1];
      // }
      getOrderParent(this.$route.query.id).then(response => {
        this.form = response.data;
      });
    },
    getTable() {
      this.form2.params = {};
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
        this.form2.params["startTime"] = this.daterangeCreateTime[0];
        this.form2.params["endTime"] = this.daterangeCreateTime[1];
        // this.form2.params.startTime= this.daterangeCreateTime[0];
        // this.form2.params.endTime = this.daterangeCreateTime[0];
      }
      this.form2.id = this.$route.query.id
      getOrderDetail(this.form2).then(response => {
        this.sysOrderList = response.data.list;
        this.total= response.data.list.length
      });
    },
    // 取消按钮
    cancel() {

    },
    // 表单重置
    reset() {
      this.form2 = {
        cdName: null,
        cdNumber: null,
        number: null,
        orderStatus: null,
        orderOutcome: null,
        // agentName: null,
        storeName: null,
        // createBy: null,
        // createTime: null,
        // updateTime: null,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.form2.pageNum = 1;
      this.getTable();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = [];
      // this.resetForm("form2");
      this.reset();
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    rowSysOrderIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },


    /** 复选框选中数据 */
    handleSysOrderSelectionChange(selection) {
      this.checkedSysOrder = selection.map(item => item.index)
    },
    /** 下载按钮操作 */
    handleDown(row) {
      downloadReport({ orderId: row.id }).then((res) => {
        let url = res.data;
        const link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }).catch(err => {
        console.error('下载失败:', err);
      });
    },
    // 查看进度
    handleProgress(row) {
        this.$router.replace({ path: '/reportDetails/ReportListProgressup', query: { info: row.id } });
      // if (row.packageType == '0') {
      // } else if (row.packageType == '1') {
      //   this.$router.replace({ path: '/reportDetails/ReportListProgressdown', query: { info: row.id } });
      // }
    },
  }
};
</script>

<style lang="scss">
.batch-box {
  margin: 15px 0;

  .batch-row {
    margin: 20px 0;
    font-size: 14px;
  }

  .span {
    color: #1F232B;
  }

  .gray-text {
    color: #666666;
  }
  .button-right {
    // justify-content: flex-end;
    position: absolute;
    right: 50px;
    transform: translateY(-20px);
  }
}
</style>
